<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autocomplete="off"
          v-aotofocus
          placeholder="What needs to be done?"
          @keydown.enter="increaseTodo"
          v-model="todoIpt"
        />
      </header>
      <section class="main" v-show="todos.length" v-cloak>
        <input class="toggle-all" type="checkbox" @click="toggleAll" />
        <ul class="todo-list">
          <li
            v-for="(todo, index) in filteredTodos"
            :key="index"
            class="todo"
            :class="{ completed: todo.completed, editing: editorTodo == todo }"
          >
            <div class="view">
              <input
                class="toggle"
                type="checkbox"
                @click="todo.completed = !todo.completed"
              />
              <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
              <button class="destroy" @click="deleteTodo(todo)"></button>
            </div>
            <input
              @blur="doneEdit(todo)"
              @keydown.enter="doneEdit(todo)"
              @keydown.esc="cancelEditor"
              v-editorAutoFocus="editorTodo == todo"
              class="edit"
              type="text"
              v-model="todo.title"
            />
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todos.length" v-cloak>
        <span class="todo-count">
          <strong>{{ filters.actived().length }}</strong>
          {{ filters.actived().length > 1 ? "items" : "item" }} left
        </span>
        <ul class="filters">
          <li>
            <a href="#/all">All</a>
          </li>
          <li>
            <a href="#/active">Active</a>
          </li>
          <li>
            <a href="#/completed">Completed</a>
          </li>
        </ul>
        <button class="clear-completed" @click="clearCompleted" v-show="filters.completed().length">Clear completed</button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
  </div>
</template>

<script>
import "./css/main.css";
import { todoStorage } from "./utils/session";
export default {
  data() {
    return {
      todos: todoStorage.acquireData(),
      todoIpt: "",
      filters: {
        all: this.allTodos,
        actived: this.activedTodos,
        completed: this.completedTodos,
      },
      editorTodo: null,
      visibility: "all",
    };
  },
  mounted() {
    console.log(this.filters[this.visibility])
    window.addEventListener("hashchange", this.onHashChange);
    this.onHashChange();
  },
  methods: {
    clearCompleted(){
      this.todos  = this.filters.actived()
    },
    onHashChange() {
      let visibiliting = window.location.hash.replace(/#\/?/, "");
      if (this.filters[visibiliting]) {
        this.visibility = visibiliting;
      } else {
        window.location.hash = "";
        this.visibility = "all";
      }
    },
    allTodos() {
      return this.todos;
    },
    activedTodos() {
      return this.todos.filter((v) => !v.completed);
    },
    completedTodos() {
      return this.todos.filter((v) => v.completed);
    },
    increaseTodo() {
      if (!this.todoIpt.trim()) {
        this.todoIpt = "";
        return;
      }
      this.todos.push({
        title: this.todoIpt,
        completed: false,
      });
      this.todoIpt = "";
    },
    toggleAll() {
      this.todos.map((v) => (v.completed = !v.completed));
    },
    deleteTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    },
    editTodo(todo) {
      this.editorTodo = todo;
    },
    doneEdit(todo) {
      if (!this.editorTodo) {
        return;
      }
      todo.title = todo.title.trim();
      this.editorTodo = null;
      if (!todo.title) {
        this.deleteTodo(todo);
      }
    },
    cancelEditor() {
      this.editorTodo = null;
    },
  },
  computed: {
    filteredTodos() {
      return this.filters[this.visibility]();
    },
  },
  watch: {
    todos: {
      handler(newVle) {
        todoStorage.setData(newVle);
      },
      deep: true,
    },
  },
  directives: {
    aotofocus: {
      inserted(el) {
        el.focus();
      },
    },
    editorAutoFocus: {
      update(el, binding) {
        binding.value && el.focus();
      },
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
</style>